<template>
  <div id="advert" class="main-box">
    <el-button
      type="primary"
      class="add"
      size="small"
      icon="el-icon-plus"
      style="margin-bottom: 15px"
      @click="goAdd"
    >
      {{ $t('开始诊断') }}
    </el-button>
    <BaseTable
      :is-request="false"
      :request="request"
      :params.sync="params"
      ref="baseTable"
    >
      <el-table-column label="ID" prop="id" width="80" />
      <el-table-column :label="$t('站点地址')" prop="website_url" />
      <el-table-column :label="$t('语言')" prop="lang" width="100" />
      <el-table-column :label="$t('模板')" prop="theme" />
      <el-table-column :label="$t('状态')" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">{{ $t('检测中') }}</span>
          <span v-if="scope.row.status == 2">{{ $t('已完成') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('检测时间')" prop="create_time" />
      <el-table-column
        :label="$t('操作')"
        width="150px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <CheckBtn @click="report(scope.row)" :tips-content="$t('报告')" />
          <DelBtn
            @success="del(scope.row)"
            :confirm-content="$t('删除此报告')"
          />
        </template>
      </el-table-column>
    </BaseTable>

    <BaseDialog
      :title="$t('开始诊断')"
      :dialog-show.sync="dialogShow"
      width="50%"
      class="advert"
      footer
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        class="addForm"
        label-position="top"
      >
        <el-form-item :label="$t('检测站点')" prop="type">
          <el-select
            v-model="addForm.website_url"
            :placeholder="$t('请选择检测站点')"
            clearable
            @change="changeSite"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.domain"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('语言')" prop="status">
          <el-select v-model="addForm.lang" :placeholder="$t('请选择语言')">
            <el-option
              v-for="item in langList"
              :key="item.lang"
              :label="item.lang"
              :value="item.lang"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('模板')" prop="status">
          <el-select v-model="addForm.theme" :placeholder="$t('请选择模板')">
            <el-option
              v-for="item in langList"
              :key="item.theme"
              :label="item.theme"
              :value="item.theme"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import seoCheckApi from '@/api/market/seoCheck.js'
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      request: seoCheckApi.SeoCheckList,
      params: {
        title: ''
      },
      dialogShow: false,
      options: [], // 站点下拉选项
      langList: [],
      addForm: {
        website_id: '',
        website_url: '',
        lang: '',
        theme: ''
      },
      rules: {
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ],
        lang: [
          {
            required: 'true',
            message: this.$t('请选择语言'),
            trigger: 'change'
          }
        ],
        theme: [
          {
            required: 'true',
            message: this.$t('请选择模板'),
            trigger: 'change'
          }
        ]
      }
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.getList()
      this.getWebsiteList()
    })
  },
  methods: {
    changeSite(e) {
      this.addForm.website_id = e.id
      this.addForm.website_url = e.domain
      seoCheckApi
        .SeoCheck({ website_id: this.addForm.website_id, flag: 'start' })
        .then(res => {
          if (res.code == 0) {
            this.langList = res.data
            if (this.langList[0]) {
              this.addForm.lang = this.langList[0].lang
              this.addForm.theme = this.langList[0].theme
            }
          }
        })
    },

    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
      })
    },
    // 新增
    goAdd() {
      this.addForm = {}
      this.dialogShow = true
    },
    // 查看报告
    report(val) {
      const routeLink = this.$router.push({
        path: '/seoCheck/report',
        query: {
          id: val.id
        }
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          seoCheckApi.SeoCheckStart({ ...this.addForm }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow = false
              this.getList()
            }
          })
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    del(row) {
      seoCheckApi.SeoDel({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },

    // 列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    }
  }
}
</script>
<style lang="scss"></style>
<style scoped lang="scss">
.addForm .el-select {
  width: 100%;
}
</style>
